import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Image, StyleSheet, View } from 'react-native'
import Home from '../Home/Home'
import Work from '../Work/Work'
import Mine from '../Mine/Mine'
import home_selected from '@/assets/tabbar/home-selected.png'
import home from '@/assets/tabbar/home.png'
import work_selected from '@/assets/tabbar/works-selected.png'
import work from '@/assets/tabbar/works.png'
import mine_selected from '@/assets/tabbar/mine-selected.png'
import mine from '@/assets/tabbar/home.png'


const BottomTab = createBottomTabNavigator()
export default function CustomTabbar() {
    return (
        <View style={styles.root}>
            <BottomTab.Navigator
                screenOptions={({ route }) => {
                    return {
                        headerShown: false,
                        tabBarIcon: ({ focused, color, size }) => {
                            let img: any;
                            if (route.name === 'Home') {
                                img = focused ? home_selected : home
                            }
                            if (route.name === 'Work') {
                                img = focused ? work_selected : work
                            }
                            if (route.name === 'Mine') {
                                img = focused ? mine_selected : mine
                            }
                            return <Image style={{ width: size, height: size }} source={img} />
                        }
                    }
                }}
            >
                <BottomTab.Screen 
                    name="Home" 
                    component={Home} 
                    options={{
                        title: ' ',
                        headerShown: false
                    }} 
                />
                <BottomTab.Screen 
                    name="Work" 
                    component={Work} 
                    options={{
                        title: ' ',
                        headerShown: false
                    }} 
                />
                <BottomTab.Screen 
                    name="Mine" 
                    component={Mine} 
                    options={{
                        title: ' ',
                        headerShown: false
                    }} 
                />
            </BottomTab.Navigator>
        </View>
    )
}
const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%'
    }
})